<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>导入示例</title>
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
		<style type="text/css">
			/*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
			html,
			body,
			#app,
			.el-container {
				/*设置内部填充为0，几个布局元素之间没有间距*/
				padding: 0px;
				/*外部间距也是如此设置*/
				margin: 0px;
				/*统一设置高度为100%*/
				height: 100%;
			}

			.el-main {
				padding: 4px;
			}
			.el-icon-search{
				color: #409EFF;
			}
			.el-icon-download{
				color: #409EFF;
			}
		</style>
	</head>

	<body>
		<el-container id="app">
			<el-main>
				<!-- :header-cell-style="{'text-align':'center'}" 表头居中 -->
				<vxe-grid border stripe ref="xGrid" resizable show-overflow highlight-current-row="true" keep-source
					@page-change="handlePageChange" :height="tableHeight" size="mini" class="checkbox-table"
					:checkbox-config="{ trigger: 'row'}" :pager-config="tablePage" :data="logData"
					:loading="tableLoading" :toolbar="tableToolbar" :export-config="tableExport"
					@toolbar-button-click="toolbarButtonClickEvent" :header-cell-style="{'text-align':'center'}">
					<vxe-table-column type="checkbox" width="60" headerAlign="center" align="center"></vxe-table-column>
					<vxe-table-column field="id" title="批次号" width="240" headerAlign="center" align="left">
					</vxe-table-column>
					<vxe-table-column field="fileName" title="文件名" width="180" headerAlign="center" align="left">
					</vxe-table-column>
					<vxe-table-column field="createUser" title="导入人" width="140" headerAlign="center" align="left">
					</vxe-table-column>
					<vxe-table-column field="createDate" title="导入时间" width="140" headerAlign="center" align="right">
					</vxe-table-column>
					<vxe-table-column field="notes" title="备注" width="200" headerAlign="center" align="left">
					</vxe-table-column>
					<vxe-table-column field="filePath" title="文件路径" width="320" headerAlign="center" align="right">
					</vxe-table-column>
					<vxe-table-column field="fileSize" title="文件大小" width="80" headerAlign="center" align="right">
					</vxe-table-column>
					<vxe-table-column field="importLook" title="操作" width="200" headerAlign="center" align="center">
						<template v-slot="{row}">
						<vxe-button size="mini" icon="el-icon-search" content="查看" @click="lookupload(row)" ></vxe-button>
						<vxe-button size="mini" icon="el-icon-download" content="导出" @click="exportupload(row)" ></vxe-button>
						</template>
					</vxe-table-column>
				</vxe-grid>

				<!-- 预览 -->
				<vxe-modal v-model="value5"  title="预览" width="920" height="450" template>
					<vxe-table show-overflow auto-resize :data="ExcelData" height="350">
						</vxe-table-column>
						<vxe-table-column type="seq" title="序号" width="50" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="name" title="名字" width="100" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="classes" title="班级" width="100" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="sex" title="性别" width="70" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="score" title="成绩" width="70" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="area" title="地址" width="350" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="phone" title="电话" width="120" headerAlign="center" align="center">
						</vxe-table-column>
					</vxe-table>
				</vxe-modal>
				<!-- 查看 -->
				<vxe-modal v-model="value6" title="查看" width="920" height="450" template>
					<vxe-table show-overflow auto-resize :data="lookExcelData" height="320">
						</vxe-table-column>
						<vxe-table-column type="seq" title="序号" width="50" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="name" title="名字" width="100" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="classes" title="班级" width="100" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="sex" title="性别" width="70" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="score" title="成绩" width="70" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="area" title="地址" width="350" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="phone" title="电话" width="120" headerAlign="center" align="center">
						</vxe-table-column>
					</vxe-table>
					<vxe-pager
					          :loading="tableLoading"
					          :current-page="tablePage1.currentPage"
					          :page-size="tablePage1.pageSize"
					          :total="tablePage1.totalResult"
					          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
					          @page-change="handlePageChange1">
					</vxe-pager>
				</vxe-modal>
				<!-- 报错信息查看 -->
				<vxe-modal v-model="value7" title="报错信息" width="920" height="450" template>
					<vxe-table show-overflow auto-resize :data="worningData">
						</vxe-table-column>
						<vxe-table-column field="rowNum" title="报错行数" width="100" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="errorMsg" title="错误原因" width="120" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="name" title="名字" width="100" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="classes" title="班级" width="100" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="sex" title="性别" width="70" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="score" title="成绩" width="70" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="area" title="地址" width="350" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="phone" title="电话" width="120" headerAlign="center" align="center">
						</vxe-table-column>
					</vxe-table>
				</vxe-modal>
				
				<!-- 导入 :before-upload="beforeUpload" :on-success="uploadSuccess"-->
				<vxe-modal v-model="value8" title="文件导入" width="600" height="450"  @close="colseUplod" :loading="fileloading">
					<div id="mubanColor" style="background-color: #F3F9FF;height: 1.875rem;line-height: 1.875rem;">
						<span style="text-decoration: none;color: #7FBEFF;" @click = "exportExampleFile()">
							<i class="el-icon-link" ></i>模板下载
						</span>
					</div>
					<p>
						<el-upload class="upload-demo" :action="uplodAction" :on-change="uplodaChange"  :before-upload="beforeUpload" ref="upload"
							:on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple 
							 :on-exceed="handleExceed" :file-list="fileList" limit=1  show-file-list="true" :auto-upload="false"  v-loading="loading">
							<el-button slot="trigger"  type="primary">选取文件</el-button>
							<el-button style="margin-left: 10px;"  type="success" @click="submitUpload">上传文件</el-button>
						</el-upload>
						<a id="yulan"  @click="filelook" :disabled="uplodadisabled" style="display: none;color:#7FBEFF;font-size: 0.625rem;text-decoration: underline;cursor: pointer;">预览</a>
						<a id="baocuo"  @click="warningLook" :disabled="uplodadisabled" style="display: none;color:#FF6600;font-size: 0.625rem;margin-top:10px;text-decoration: underline;cursor: pointer;">查看报错原因</a>
					</p>
					<p>
						上传要求：<br>
						<span style="color: red;font-size: 0.625rem;">
							1.上传文件最大限制数为10万条<br>
							2.上传txt类型文件时，需选择对应的分隔符
						</span>
					</p>
					<p>
						<div id="Separator" style="display: none;font-size: 14;" >
							分隔符:
						  <el-select v-model="value" placeholder="请选择txt文档所用分隔符" size="small">
							<el-option
							  v-for="item in options"
							  :key="item.value"
							  :label="item.label"
							  :value="item.value">
							</el-option>
						  </el-select>
						</div>
					</p>
					<p>
						<span >备注</span>
						<vxe-textarea v-model="desc":disabled="uplodadisabled"></vxe-textarea>
					</p>
					<p style="padding-left: 370px; ">
						<vxe-button status="primary"style="position:absolute; resize:15px;bottom:30px;" content="导入数据库" :disabled="uplodadisabled" @click="importNewFile"></vxe-button>
						<vxe-button status="info" style="position:absolute; left: 490px;bottom:30px;" content="取消" @click="colseUplod"></vxe-button>
					</p>
				</vxe-modal>
			</el-main>
		</el-container>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var main = {
				data() {
					return {
						 options: [{
						          value: ',',
						          label: '逗号(,)'
						        }, {
						          value: ' ',
						          label: '空格( )'
						        }, {
						          value: '	',
						          label: '制表符(tab键)'
						        }, {
						          value: '-',
						          label: '横杠(-)'
						        }, {
						          value: '/',
						          label: '斜杠(/)'
						        }],
						value: '',
						worningData:[],
						fileSize: '',
						code : '',
						fileNameGet:'',
						value6: false,
						value7: false,
						fileList: [],
						desc: '',
						rowdata:[],
						value8: false,
						setExcel: [],
						flag: 1,
						lookExcelData:[],
						ExcelData: [],
						value5: false,
						loading: false,
						disabled: false,
						visible: false,
						uplodadisabled:true,
						tableHeight: '100%',
						tablePage: {
							perfect: true,
							total: 0,
							currentPage: 1,
							pageSize: 15,
							align: 'left',
							pageSizes: [15, 30, 45, 60, 75, 90],
							layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
								'Total'
							],
						},
						tablePage1: {
						    currentPage: 1,
						    pageSize: 10,
						    totalResult: 0
						},
						tableToolbar: {
							id: 'toolbar',
							size: 'mini',
							perfect: true,
							 buttons: [{
								code: 'importfile',
								name: '导入',
								status: 'perfect',
								icon: 'fa fa-arrow-circle-down vxe-primary-color'
							},
							{
								code: 'btnExport',
								name: '导出',
								status: 'perfect',
								icon: 'fa fa-arrow-circle-up vxe-primary-color'
							}],
							refresh: {
								icon: 'fa fa-refresh',
								iconLoading: 'fa fa-spinner fa-spin'
							},
							zoom: {
								iconIn: 'fa fa-arrows-alt',
								iconOut: 'fa fa-expand'
							},
							custom: {
								icon: 'fa fa-cog',
								storage: true,
								checkMethod: this.checkColumnMethod
							}
						},
						tableExport: {
							filename: 'export',
							sheetName: 'Sheet1',
							type: 'xlsx',
							// 自定义类型
							types: ['xlsx', 'csv', 'html', 'xml', 'txt']
						},
						submitLoading: false,
						queryData: {
							logId: "",
							userName: "",
							loginTime: "",
							logIp: "",
							beginTime: "",
							endTime: ""
						},
						logData: [],
						tableLoading: false,
						logTypeOptions: [],
						logResultCodeOptions: [],
						uplodaData:'',
						uplodAction:curl+'/file/upload',
						fileloading:false,
						upfileName:''
					}
				},
				created() {
					this.findList();
				},
				mounted() {
					this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 5;
					//window.innerHeight:浏览器的可用高度
					//this.$refs.table.$el.offsetTop：表格距离浏览器的高度
					//后面的50：根据需求空出的高度，自行调整
				},
				watch: {
					value6 (newValue, oldValue){
						if(newValue == false){
							this.tablePage1.currentPage = 1
						}
					},
				},
				methods: {
					//获取列表信息
					findList() {
						this.tableLoading = true;
						let params = Object.assign({
							page: this.tablePage.currentPage,
							rows: this.tablePage.pageSize,
						});
						var object = this;
						webApi("/file/getAllFileInfo", "post", params, function(data) {
							object.logData = data.data.rows;
							object.tablePage.total = data.data.total;
							object.tableLoading = false;
						}, function() {
							object.tableData = [];
							object.tablePage.total = 0
							object.tableLoading = false;
						});
					},
					batchRemove() {
						var rows = this.$refs.xGrid.getCheckboxRecords();
						if (rows.length <= 0) {
							this.$XModal.message({
								message: '请选择需要删除的记录',
								status: 'error'
							});
							return false;
						}
						this.$XModal.confirm(`您确定要把当前选中的数据删除吗?`).then(type => {
							if (type === 'confirm') {
								this.submitLoading = true;
								let params = Object.assign(rows);
								//console.info(params);
								XEAjax.bodyType = "form-data";
								XEAjax.post(`${curl}/log/batchRemove`, params).then(data => {
									if (data.code == 200) {
										this.$refs.xGrid.commitProxy('reload');
										this.$XModal.message({
											message: data.msg,
											status: 'success'
										});
									} else {
										this.$XModal.message({
											message: data.msg,
											status: 'error'
										});
									}
								});
								this.submitLoading = false;
							}
						});
					},
					removeEvent(row) {
						this.$XModal.confirm('您确定要删除该数据?').then(type => {
							if (type === 'confirm') {
								this.submitLoading = true;
								let params = Object.assign(row);
								XEAjax.post(`${curl}/log/delete`, params).then(data => {
									if (data.code == 200) {
										this.$refs.xGrid.commitProxy('reload');
										this.$XModal.message({
											message: data.msg,
											status: 'success'
										});
										this.showEdit = false;
									} else {
										this.$XModal.message({
											message: data.msg,
											status: 'error'
										});
									}
								});
								this.submitLoading = false;
							}
						});
					},
					queryChange() {
						this.$refs.xGrid.commitProxy('reload');
					},
					//主页分页
					handlePageChange({
						currentPage,
						pageSize
					}) {
						this.tablePage.currentPage = currentPage
						this.tablePage.pageSize = pageSize
						this.findList()
					},
					//查看弹窗分页
					handlePageChange1({
						currentPage,
						pageSize
					}) {
						this.tablePage1.currentPage = currentPage
						this.tablePage1.pageSize = pageSize
						this.lookupload()
					},
					searchEvent(formName, acType) {
						if (acType == 0) {
							this.queryData = {
								keyword: "",
								beginTime: "",
								endTime: ""
							}
							this.findList();
						}
						this.findList();
					},
					formatDate({
						cellValue
					}) {
						return XEUtils.toDateString(cellValue, 'yyyy-MM-dd')
					},
					//导入数据库
					importNewFile(){
						this.loading = true
						//console.log(this.fileNameGet)
						XEAjax.post(`${curl}/file/submit`,{
							id:this.uplodaData,
							fileName:this.fileNameGet,
							notes:this.desc,
							fileSize : this.fileSize,
						}).then(data => {
							console.log(this.size)
							console.log(this)
								if (data.code == 200) {
									this.loading = false
									this.$XModal.message({
										message: data.msg,
										status: 'success'
									});
									this.value8 = false;
									this.findList();
								} else {
									this.$XModal.message({
										message: data.msg,
										status: 'warning'
									});
								}
							this.$refs.xGrid.commitProxy('reload');
							this.colseUplod();
						}).catch(data => {
							this.tableLoading = false;
						});
					},
					//取消按钮
					colseUplod(){
						this.value8 = false;
						this.fileList=[];
						this.desc='';
						this.value='';
						this.uplodadisabled=true;
						this.fileloading=false
						document.getElementById("baocuo").style.display="none";
						document.getElementById("yulan").style.display="none";
						document.getElementById("Separator").style.display="none";
						
					},
					//导入
					toolbarButtonClickEvent({
						code
					}, event) {
						switch (code) {
							case 'btnRemove':
								this.batchRemove();
								break;
							case 'btnExport':
								this.$refs.xGrid.exportData({
									filename: '导出示例',
									sheetName: 'Sheet1',
									type: 'xlsx',
									types: ['xlsx', 'csv', 'html', 'xml', 'txt']
								});
								this.loading = true 
								break;
							case 'importfile':
								this.value8 = true;
								break;
						}
					},
					checkColumnMethod({
						column
					}) {
						if (['logType', 'logResultCode'].includes(column.property)) {
							return false
						}
						return true
					},
					//上传文件
					submitUpload() {
						//使用this中的$refs.upload.tempIndex判断是否选择了文件
						if(this.$refs.upload.tempIndex==1){
							this.$message({
								 message:"请先选择文件(请勿重复上传!)",
								status: 'warning'
							});
						}else {
							//判断TXT文件是否选择分隔符
							if($("#Separator").css("display")=="block" && this.value==""){
								this.$message({
									message: "请选择txt文档所用的分隔符",
									type: 'warning'
								});
								return 
							}
							this.fileloading=true
							this.loading = true
							this.$refs.upload.tempIndex=1
							this.$refs.upload.submit();
							
						}
						this.fileloading=false
						
						
					},
					//选择文件时触发
					uplodaChange(file,fileList){
						let str=file.name;
						let wz=str.indexOf('.');
						let len=str.length;
						let fileTypes=str.substring(wz+1,len);
						if(fileTypes=="txt"){
							document.getElementById("Separator").style.display="block";
							
						}else{
							document.getElementById("Separator").style.display="none";
						}
						
					},
					
					//上传文件之前的钩子
					beforeUpload(file){
						console.log(file.type)
						var formData = new FormData();
						formData.append("file", file);
						formData.append('separator',this.value)
						let params = Object.assign(formData)
						console.log(params)
						//params.separator = this.value
						XEAjax.post(`${curl}/file/upload`,params).then(data => {
							//上传成功
							if(data.code == 200){
								this.loading = false 
								this.fileNameGet=file.name;
								this.uplodaData = data.data;
								this.fileSize = file.size;
								this.$XModal.message({
									message: data.msg,
									status: 'success'
								});
								this.fileloading=false
								this.uplodadisabled=false;
								document.getElementById("yulan").style.display="block";
								document.getElementById("baocuo").style.display="none";
								document.getElementById("Separator").style.display="none";
								this.value='';
							}else{
								//上传失败
								this.fileList=[]
								this.loading = false 
								this.$XModal.message({
									 message:data.msg,
									 duration : 5000,
									 status: 'warning'
								});
								this.fileloading=false
								this.worningData=data.data
								this.uplodadisabled=true;
								document.getElementById("baocuo").style.display="block";
								document.getElementById("Separator").style.display="none";
								this.value='';
							}
						})
					},
					//查看
					lookupload(row){
						if(row){
							rowdata=row;
						}
						console.log(rowdata)
						this.tableLoading = true;
						let params = Object.assign({
							page: this.tablePage1.currentPage,
							rows: this.tablePage1.pageSize,
							keyword:rowdata.id
						});
						var object = this;
						webApi("/file/check", "post", params, function(data) {
							object.tablePage1.totalResult = data.data.total;
							object.tableLoading = false;
							object.value6 = true
							object.lookExcelData = data.data.rows
						}, function() {
							object.tableData = [];
							object.tablePage1.totalResult = 0
							object.tableLoading = false;
						});
						// object.tablePage1.currentPage = ''
					},
					//导出单表数据
					exportupload(row){
						window.location.href = curl+'/file/export?uuId='+row.id+'&token='+getCookie("token");
					},
					//导出模板文件
					exportExampleFile(){
						window.location.href = curl+'/file/exportExampleFile?type=xlsx'+'&token='+getCookie("token");
					},
					//预览
					filelook() {
						XEAjax.get(`${curl}/file/preview?uuId=`+this.uplodaData).then(data => {
							this.tableLoading = true;
								if (data.code == 200) {
									this.value5 = true
									this.ExcelData = data.data
									this.tablePage1.totalResult = data.data.total;
								} else {
									this.$XModal.message({
										message: data.msg,
										status: 'warning'
									});
								}
							var that=this;
							that.$refs.xGrid.commitProxy('reload');
						}).catch(data => {
							this.tableLoading = false;
						});
						
						this.value5 = true;
						
					},
					//报错查看
					warningLook(){
						this.value7 = true
					},
					//列表移除文件时的钩子
					handleRemove(file, fileList) {
						// console.log(file, fileList);
						this.$refs.upload.tempIndex=1;
						this.value=''
					},
					handlePreview(file) {
						console.log(file);
					},
					handleExceed(files, fileList) {
						this.$message.warning(
							`当前限制选择文件个数为1个，本次选择了 ${files.length} 个文件`);
					},
					//删除文件时的钩子
					beforeRemove(file, fileList) {
						document.getElementById("Separator").style.display="none";
						document.getElementById("yulan").style.display="none";
						document.getElementById("baocuo").style.display="none";
						return this.$confirm(`确定移除 ${ file.name }？`);
					},
					//导出外部总表
					exportDataEvent () {
					    this.$refs.xGrid.openExport({ types: ['csv'] })
					}



				}
			};

			var vue = Vue.extend(main);
			new vue().$mount('#app');
		}
	</script>

</html>
